<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Simulator</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="spinner.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/pixi-viewport@4.2.3/dist/viewport.min.js"></script>
    <link rel="stylesheet" href="http://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
    <script src="http://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
    <script src="Point.js"></script>
</head>



<body class="noselect">
<div class="container-fluid w-100 h-100 pt-0 pb-0">
    <div class="row h-100">
        <div class="col-2 pt-4 shadow-lg mr-0 status-panel bg-light ">
            <!-- <i class="fas fa-car h2"></i> -->
            <h2 class="pb-3 border-bottom">CityFlow</h2>
            <table class="table table-borderless table-hover border-bottom">
                <tbody>
                <tr>
                    <th scope="row" class="pl-0">Number of vehicles</th>
                    <td class="text-right" id="car-num">0</td>
                </tr>
                <tr class="d-none">
                    <th scope="row" class="pl-0">Total number of simulation step</th>
                    <td class="text-right" id="total-step-num">0</td>
                </tr>
                <tr>
                    <th scope="row" class="pl-0">Current step</th>
                    <td class="text-right" id="current-step-num">0</td>
                </tr>
                <tr class="d-none">
                    <th scope="row" class="pl-0">Current simulation progress</th>
                    <td class="text-right" id="progress-percentage">0</td>
                </tr>
                <tr class="d-none" id="speed-tr">
                    <th scope="row" class="pl-0">Average speed on lanes</th>
                    <td class="text-right" id="speed">0</td>
                </tr>
                <tr>
                    <th scope="row" class="pl-0">Selected</th>
                    <td class="text-right" id="selected-entity"></td>
                </tr>
                </tbody>
            </table>
            <div id="file-upload" class="border-dark">
                <div class="custom-file mb-3">
                    <input class="custom-file-input" type="file" id="roadnet-file">
                    <label class="custom-file-label" for="roadnet-file" id="roadnet-label">Roadnet File</label>
                </div>
                <div class="custom-file mb-3">
                    <input class="custom-file-input" type="file" id="replay-file">
                    <label class="custom-file-label" for="replay-file" id="replay-label">Replay File</label>
                </div>
                <div class="custom-file">
                    <input class="custom-file-input" type="file" id="chart-file">
                    <label class="custom-file-label" for="replay-file" id="chart-label">Chart File (Optional)</label>
                </div>
                <div class="row m-3 align-items-center">
                    <div class="col-6">
                        <div class="custom-control custom-checkbox">
                            <input class="custom-control-input" type="checkbox" id="debug-mode" />
                            <label class="custom-control-label" for="debug-mode">
                                Debug*
                            </label>
                        </div>
                    </div>
                    <div class="col-6 text-center p-0">
                        <button class="btn btn-outline-secondary" id="start-btn">Start</button>
                    </div>
                </div>
            </div>
            <div id="control-box " class="border-bottom">
                <h5 class="mt-4">Control Box</h5>
                <table class="table table-borderless table-hover mb-0">
                    <tbody>
                    <tr style="line-height: 10px; height: 10px;">
                        <th scope="row" class="pl-0" id="stats-name">Replay Speed</th>
                        <td class="text-right" id="replay-speed">0</td>
                    </tr>
                    </tbody>
                </table>
                <div class="row no-gutters">
                    <div class="col-1 text-center">
                        <span class="fas fa-minus" id="slow-btn" style="cursor: pointer"></span>
                    </div>
                    <div class="col-10">
                        <input type="range" class="custom-range" id="replay-control">
                    </div>
                    <div class="col-1 text-center">
                        <span class="fas fa-plus" id="fast-btn" style="cursor: pointer"></span>
                    </div>
                </div>
                <div class="row m-3">
                    <div class="col-12 text-center">
                        <button class="btn btn-outline-secondary w-100" id="pause">Pause</button>
                    </div>
                </div>

            </div>

            <h5 class="mt-4">Info Box</h5>
            <div id="info" class="alert alert-light border">
            </div>
        </div>
        <div class="col-10 h-100 d-flex flex-column p-0" >
            <div id="simulator-canvas" class="flex-grow-1 h-100">
                <div id="spinner" class="spinner d-none">
                    <div class="rect1"></div>
                    <div class="rect2"></div>
                    <div class="rect3"></div>
                    <div class="rect4"></div>
                    <div class="rect5"></div>
                </div>
                <div id="guide" class="ml-auto mr-auto mt-5 alert alert-secondary  w-50">
                    <h5>How to use this player</h5>
                    <hr />
                    <ul>
                        <li>Click <b>Roadnet File</b> to upload the roadnet log file(*.json)</li>
                        <li>Click <b>Replay File</b> to upload the replay file(*.txt)</li>
                        <li>(Optional) Click <b>Chart File</b> to upload the chart log file</li>
                        <li>Press the <b>Start</b> button to start replaying the simulation!</li>
                        <li>To restart, just press <b>Start</b> again</li>
                        <li>(*) The <b>debug</b> option enables displaying the ID of vehicles, roads and intersections during a mouse hover.
                            <b>This will cause a slower replaying</b>, so we suggest using it only for debugging purposes.</li>
                    </ul>
                    <h5>Navigation Keys</h5>
                    <hr />
                    <ul class="list-group">
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            Pause
                            <span class="badge badge-secondary">P</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            Step Forward
                            <span class="badge badge-secondary">]</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            Step Backward
                            <span class="badge badge-secondary">[</span>
                        </li>
                    </ul>

                </div>
            </div>
            <div id="chart-container" class="h-25 m-0 border-top pt-2 pl-4 d-none" >
                <div id="chart-title">Real-time Chart</div>
                <div id="chart" class="ct-chart"></div>
            </div>
        </div>
    </div>
</div>


<script src="script.js"></script>
</body>

</html>